<template>
	<view class="blind_box_deta">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714"></uv-navbar>
		<image :src="product.cover" class="cover"></image>
		<view class="content">
			<view class="header">{{product.name}}</view>
			<view class="info_view">
				<view class="item">
					<view class="key">{{$t('home.价格')}}</view>
					<view class="cell">
						<text class="unit">$</text>
						<text class="value">{{product.price}}</text>
					</view>
				</view>
				<view class="item">
					<view class="key">{{$t('home.发行总量')}}</view>
					<view class="cell">
						<text class="value">{{product.issue_all}}</text>
						<text class="unit">份</text>
					</view>
				</view>
				<view class="item">
					<view class="key">{{$t('home.每人限购')}}</view>
					<view class="cell">
						<text class="value">{{data_info.quota}}</text>
						<text class="unit">份</text>
					</view>
				</view>
				<view class="item">
					<view class="key">{{$t('home.剩余数量')}}</view>
					<view class="cell">
						<text class="value">{{data_info.cache_stock}}</text>
						<text class="unit">份</text>
					</view>
				</view>
			</view>
			<!-- <view class="number_view">
				<view class="title">购买数量</view>
				<view class="number_box">
					<uv-number-box v-model="value">
						<template v-slot:minus>
							<image src="@/static/images/a1.png" class="oper_img"></image>
						</template>
						<template v-slot:input>
							<view class="value">{{value}}</view>
						</template>
						<template v-slot:plus>
							<image src="@/static/images/a2.png" class="oper_img"></image>
						</template>
					</uv-number-box>
				</view>
			</view> -->
			<view class="submit">
				<view class="btn" @click="buy" v-if="data_info.cache_stock>0">{{$t('home.购买')}}</view>
				<view class="btn end" v-else>{{$t('home.已售罄')}}</view>
			</view>
			<view class="tabs">
				<view class="item" :class="active==1?'active':''" @click="active=1">{{$t('home.盲盒物品')}}</view>
				<view class="item" :class="active==2?'active':''" @click="active=2">{{$t('home.盲盒介绍')}}</view>
			</view>
			<view class="list" v-if="active==1">
				<view class="item" v-for="item in product.blindbox">
					<view class="item_cover">
						<image :src="item.product.cover"></image>
					</view>
					<view class="name">{{item.product.name}}</view>
				</view>
			</view>
			<view class="parse_view" v-else>
				<uv-parse :content="product.content"></uv-parse>
			</view>
		</view>
		<uv-popup ref="popup" round="10" bgColor="none" mode="bottom">
			<CodeInput @close="popup.close" @submit="submit" />
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		purchaseInfo,
		purchaseBuy
	} from "@/request/api";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		shallowRef
	} from 'vue';
	import CodeInput from "@/components/home/CodeInput.vue";
	import useBase from "@/hooks/useBase.js";
	const {
		router
	} = useBase();
	const emit = defineEmits(["close", "submit"]);
	const value = ref(1);

	const popup = shallowRef();
	const buy = () => popup.value.open();

	const submit = async (value) => {
		let {
			order_id
		} = await purchaseBuy({
			id: data_info.value.id,
			pay_password: value
		});
		popup.value.close();
		router(`/pages/common/order_result?id=${order_id}`);
	};

	const active = ref(1);

	const data_info = ref({});
	const product = ref({});
	onLoad(async ({
		id
	}) => {
		let {
			info,
			product: product_value
		} = await purchaseInfo({
			id
		});
		data_info.value = info;
		product.value = product_value;
	})
</script>

<style scoped lang="scss">
	.blind_box_deta {
		.cover {
			width: 100%;
			height: 400rpx;
		}

		.content {
			width: 100%;
			min-height: 1624rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: url(@/static/images/bg1.png) no-repeat;
			background-size: 100% 100%;

			.header {
				text-align: center;
				color: #DDF247;
				font-size: 40rpx;
				font-weight: 800;
				padding: 36rpx 0 30rpx;
				box-sizing: border-box;
			}

			.info_view {
				border-radius: 10rpx;
				padding: 0rpx 40rpx 30rpx;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 0.1);
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 50%;
					padding-top: 30rpx;
					box-sizing: border-box;

					.key {
						color: #808080;
						font-size: 26rpx;
					}

					.cell {
						padding-top: 20rpx;
						box-sizing: border-box;

						.unit {
							color: #FFFFFF;
							font-size: 32rpx;
							font-weight: 400;
						}

						.value {
							color: #FFFFFF;
							font-size: 40rpx;
							font-family: DINPro;
						}
					}
				}
			}

			.number_view {
				height: 78rpx;
				margin: 40rpx 0 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					color: #CCCCCC;
					font-size: 32rpx;
					font-weight: bold;
					padding-left: 22rpx;
					box-sizing: border-box;
					position: relative;

					&::after {
						content: "";
						width: 5rpx;
						height: 32rpx;
						background: #DDF247;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						z-index: 2;
					}
				}

				.number_box {
					.oper_img {
						width: 78rpx;
						height: 78rpx;
					}

					.value {
						width: 180rpx;
						height: 78rpx;
						line-height: 78rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 50rpx;
						border-radius: 10rpx;
						margin: 0 18rpx;
						background: #656565;
					}
				}
			}

			.submit {
				margin-top: 40rpx;
				padding: 0 35rpx;
				box-sizing: border-box;

				.btn {
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #111111;
					font-size: 28rpx;
					font-weight: bold;
					border-radius: 20rpx;
					background: #DDF247;

					&.end {
						color: #111111;
						background: #CCCCCC;
					}
				}
			}

			.tabs {
				padding: 68rpx 10rpx 40rpx;
				box-sizing: border-box;
				display: flex;
				position: relative;

				&::after {
					content: "";
					width: 100vw;
					height: 2rpx;
					background: #333333;
					position: absolute;
					left: -30rpx;
					bottom: 0;
					z-index: 2;
				}

				.item {
					color: #808080;
					font-size: 32rpx;
					margin-right: 70rpx;

					&:last-child {
						margin-right: 0;
					}

					&.active {
						color: #DDF247;
						font-size: 32rpx;
						// font-weight: bold;
					}
				}
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 335rpx;
					height: 335rpx;
					margin-bottom: 30rpx;
					// background: url(@/static/images/s1.png) no-repeat;
					// background-size: 100% 100%;
					position: relative;

					.item_cover {
						image {
							width: 335rpx;
							height: 335rpx;
						}
					}

					// .cover {
					// 	width: 100%;
					// 	height: 275rpx;
					// 	display: flex;
					// 	justify-content: center;
					// 	align-items: center;

					// 	image {
					// 		width: 201rpx;
					// 		height: 109rpx;
					// 	}
					// }

					.name {
						// height: 60rpx;
						color: #EEEEEE;
						font-size: 24rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						padding: 0 32rpx;
						box-sizing: border-box;
						position: absolute;
						left: 0;
						bottom: 32rpx;
						z-index: 2;
					}
				}
			}

			.parse_view {
				color: #999999;
				font-size: 26rpx;
			}
		}
	}
</style>